<template>
   <!-- 放置一个弹层 用来编辑新增节点 -->
<el-dialog :title="iseait ? '新增权限点': '编辑'  " :visible.sync="showDialog" @close="btnCancel">
  <!-- 表单 -->
  <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="权限名称" prop="name">
      <el-input v-model="formData.name" style="width:90%" />
    </el-form-item>
    <el-form-item label="权限标识" prop="code">
      <el-input v-model="formData.code" style="width:90%" :disabled='disbleds'/>
    </el-form-item>
    <el-form-item label="权限描述">
      <el-input v-model="formData.description" style="width:90%" />
    </el-form-item>
    <el-form-item label="开启">
      <el-switch
        v-model="formData.enVisible"
        active-value="1"
        inactive-value="0"
      />
    </el-form-item>
  </el-form>
  <el-row slot="footer" type="flex" justify="center">
    <el-col :span="12">
      <el-button size="small" type="primary" @click="enter">确定</el-button>
      <el-button size="small" @click="Cancel">取消</el-button>
    </el-col>
  </el-row>
</el-dialog>
</template>

<script>


export default {
props: {
    // 是否显示弹层
    iseait: {
      type: Boolean
    },
    listlist:{
      type:Array,
      default:()=>[]
    }
},
data() {
 const vlidaname=(rule,value,callback)=>{
   const namelist=  this.listlist.filter(item=>item.pid==this.formData.pid).map(item=>item.name )
namelist.includes(value) ? callback(new Error(value + '已经占用')) : callback()
 }
  return {
    disbleds:true,
    showDialog:false,
    permissionList: [], // 权限管理列表数据
    formData: {
      name: '', // 名称
      code: '', // 权限标识
      description: '', // 描述
      enVisible: '0', // 开启
      pid: '', // 添加到哪个节点下
      type: '' // 类型吖
    },
    rules: {
      name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }
    ,{validator: vlidaname,trigger: 'blur'}
  ],
      code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
    }
  }
},



  
    created() {

    },
    mounted() {

    },
    methods: {
   //dialog 关闭函数
   btnCancel(){
    // this.$refs.perForm.resetFields()
   this.formData={
      name: '', // 名称
      code: '', // 权限标识
      description: '', // 描述
      enVisible: '0', // 开启
      pid: '', // 添加到哪个节点下
      type: '' // 类型吖
    }
   },
   //弹窗点击确定
   enter(){
    
    this.$refs.perForm.validate(vali=>{
         if(vali){
            this.$emit('addperev',{...this.formData})
          this.showDialog=false

         }
    })
   },
   //弹窗点击取消
   Cancel(){ 
    this.showDialog=false
   
   },
    }
};
</script>

<style scoped lang="less">

</style>
